<template>
	<!-- Header组件 -->
	<div class="bili-header">
		<div class="">
			<div class="header-banner">
				<div class="header-bar">
					<ul class="bar-bilibili">
						<li class="left-bili">
							<a href="#">
								<img
									src="./images/Snipaste_2022-04-15_17-24-43.png"
									alt="bilibili"
								/>
								<div class="left-shouye">
									<span class="left-one">首页</span>

									<span class="iconfont icon-xiangxia"></span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">番剧</a>
						</li>
						<li>
							<a href="#">直播</a>
						</li>
						<li>
							<a href="#">游戏中心</a>
						</li>
						<li>
							<a href="#">会员购</a>
						</li>
						<li>
							<a href="#">漫画</a>
						</li>
						<li>
							<a href="#">赛事</a>
						</li>
					</ul>
					<div class="bar-search">
						<div class="search-center">
							<form class="search-form">
								<input
									class="search-box"
									type="text"
									placeholder="智商天花板，亦有差距"
								/>
								<span class="iconfont icon-Magnifier"></span>
							</form>
						</div>
					</div>
					<ul class="bar-user">
						<li class="user-img v-popover-wrap" @click="loginHandler">
							<div class="img-info">
								<!-- <img
						src="./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp"
							class="imger"
							alt="用户头像"
						/> -->
							</div>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-huiyuan"></span>
							<span>大会员</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-xiaoxi1"></span>
							<span>消息</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-dongtai"></span>
							<span>动态</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-shoucang"></span>
							<span>收藏</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-lishi"></span>
							<span>历史</span>
						</li>
						<li class="v-popover-wrap">
							<span class="iconfont icon-dengpao"></span>
							<span>创作中心</span>
						</li>
						<li class="v-popover-wrap">
							<div class="pushWord">
								<span class="iconfont icon-shangchuan1"></span>
								<span>投稿</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="header-channel">
				<div class="channer-left">
					<div class="channer">
						<span class="channer-icon iconfont icon-dongtai"></span>
						<span>动态</span>
					</div>
					<div class="channer">
						<span class="channer-icon iconfont icon-remen"></span>
						<span>热门</span>
					</div>
					<div class="channer">
						<span class="channer-icon iconfont icon-pindao"></span>
						<span>频道</span>
					</div>
				</div>
				<div class="channer-right">
					<ul class="channer-center">
						<li>番剧</li>
						<li>国创</li>
						<li>综艺</li>
						<li>动画</li>
						<li>鬼畜</li>
						<li>舞蹈</li>
						<li>娱乐</li>
						<li>科技</li>
						<li>美食</li>
						<li>番剧</li>
						<li>国创</li>
						<li>综艺</li>
						<li>动画</li>
						<li>鬼畜</li>
						<li>舞蹈</li>
						<li>娱乐</li>
						<li>科技</li>
						<li>美食</li>
					</ul>
					<ul class="channer-zhuan">
						<li>
							<span class="iconfont icon-columnszhuanlan"></span>
							<span>专栏</span>
						</li>
						<li>
							<span class="iconfont icon-icon"></span>
							<span>课堂</span>
						</li>
						<li>
							<span class="iconfont icon-hongqi"></span>
							<span>活动</span>
						</li>

						<li>
							<span class="iconfont icon-15"></span>
							<span>直播</span>
						</li>
						<li>
							<span class="iconfont icon-duihuaxinxitianchong"></span>
							<span>社区中心</span>
						</li>

						<li>
							<span class="iconfont icon-yinleyule channer-icon"></span>
							<span>新歌热榜</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "HeaderComp",
	methods: {
		loginHandler() {
			this.$router.push("/login");
		},
	},
};
</script>

<style lang="less" scoped>
.bili-header {
	min-height: 64px;
	position: relative;
	margin: 0 auto;
	max-width: 2560px;
	width: 100%;
	background-color: #ffffff;
	.header-banner {
		width: 100%;
		background-image: url("./images/Snipaste_2022-04-17_10-37-45.png");
		background-size: cover;
		height: 155px;
		// border: 1px solid black;
		.header-bar {
			// border: 1px solid #efefef;
			z-index: 1002;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px 0 24px;
			max-width: 2560px;
			width: 100%;
			height: 64px;
			box-sizing: border-box;
			.bar-bilibili {
				list-style-type: none;
				padding: 0;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				li {
					position: relative;
					a {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 56px;
						text-decoration: none;
						color: #18191c;
						font-size: 13px;
						margin-right: 10px;
					}
				}
				.left-bili {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 56px;
					img {
						width: 60px;
						margin-right: 10px;
					}
					.left-shouye {
						display: flex;
						align-items: center;
						text-align: center;
						font-size: 14px;
						line-height: 20px;
						cursor: pointer;
						.left-one {
							display: inline-block;
							margin-right: 5px;
						}
						.icon-xiangxia {
							font-size: 5px;
						}
					}
				}
			}
			.bar-search {
				margin: 0 10px;
				flex: 1 auto;
				height: 38px;

				.search-center {
					position: relative;
					margin: 0 auto;
					.search-form {
						display: flex;
						align-items: center;
						padding: 0 48px 0 4px;
						position: relative;
						z-index: 1;
						overflow: hidden;
						line-height: 38px;
						// border: 1px solid #eae9eb;
						height: 40px;
						background-color: #eae9eb;
						opacity: 0.9;
						transition: background-color 0.3s;
						border-radius: 5px;
						// border: 1px solid var(--line_regular);
						border-bottom: none;
						// background: var(--bg1);
						&:hover {
							background-color: #fff;
						}
						.search-box {
							color: #61666d;
							// background-color: #eae9eb;
							background-color: transparent;
							flex: 1;
							overflow: hidden;
							padding-right: 8px;
							box-shadow: none;
							font-size: 14px;
							line-height: 20px;
							border: none;
							&:focus {
								border: 1px solid #61666d;
								outline: none;
							}
						}
						.icon-Magnifier {
							// border: 1px solid #000;
							position: absolute;
							top: 3px;
							right: 7px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0;
							padding: 0;
							width: 32px;
							height: 32px;
							border: none;
							border-radius: 6px;
							color: #29272b;
							line-height: 32px;
							cursor: pointer;
							transition: background-color 0.3s;
							&:hover {
								background-color: #eae9eb;
							}
						}
					}
				}
			}

			.bar-user {
				list-style-type: none;
				display: flex;
				align-items: center;
				margin-right: 10px;
				padding: 0;
				.v-popover-wrap {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #18191c;
					font-size: 14px;
					margin: 0 5px;
				}
				.user-img {
					position: relative;
					box-sizing: content-box;
					// padding-right: 10px;
					width: 50px;
					height: 50px;
					cursor: pointer;
					.img-info {
						width: 38px;
						height: 38px;
						box-sizing: content-box;
						border: 2px solid #fff;
						display: block;
						position: absolute;
						right: 0;
						background-image: url("./images/ab7e62e6341b5d94d46deb7a37fb16c15e1c57e8.jpg@240w_240h_1c_1s.webp");
						background-size: cover;
						border-radius: 50%;
						margin: 0;
						padding: 0;
					}
				}
				.pushWord {
					margin-left: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-left: 16px;
					width: 90px;
					height: 34px;
					border-radius: 8px;
					background: #fb7299;
					color: #fff;
					text-align: center;
					font-size: 14px;
					line-height: 20px;
					cursor: pointer;
					transition: background-color 0.3s;
					font-weight: 500;
				}
			}
		}
	}
	.header-channel {
		height: 100px;
		display: flex;
		align-items: center;
		padding: 0 56px;
		position: relative;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		.channer-left {
			display: flex;
			margin-right: 4px;
			z-index: 0;
			display: flex;
			align-items: center;
			.channer {
				display: flex;
				margin-right: 16px;
				position: relative;
				align-items: center;
				flex-direction: column;
				color: black;
				font-size: 13px;
				.channer-icon {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 6px;
					border-radius: 50%;
					color: white;
					font-size: 25px;
				}
				.icon-dongtai {
					background-color: #ff9212;
				}
				.icon-remen {
					background-color: #f07775;
				}
				.icon-pindao {
					background-color: #59ca73;
				}
			}
		}
		.channer-right {
			display: flex;
			height: 100px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.channer-center {
				padding: 0;
				margin: 0;
				padding-right: 20px;
				list-style: none;
				display: grid;
				// align-items: center;
				// width: 728px;
				// flex-shrink: 0;
				// flex-wrap: wrap;
				grid-auto-flow: column;
				grid-column: span 4;
				grid-gap: 10px;
				grid-template-rows: repeat(2, 1fr);
				border-right: 1px solid #f6f7f8;
				height: 66px;
				li {
					background-color: #f6f7f8;
					border: 1px solid #f6f7f8;
					border-radius: 6px;
					color: #61666d;
					text-align: center;
					font-weight: 400;
					font-size: 13px;
					height: 26px;
					line-height: 26px;
					width: 72px;
				}
			}
			.channer-zhuan {
				padding: 0;
				margin: 0;
				list-style: none;
				width: 230px;
				grid-column: span 1;
				grid-row-gap: 10px;
				grid-auto-flow: column;
				display: grid;
				grid-template-rows: repeat(2, 1fr);
				li {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100%;
					color: #747679;
					text-align: center;
					font-weight: 400;
					transition: background-color 0.3s, color 0.3s;
					font-size: 13px;
					.iconfont {
						margin-right: 4px;
					}
				}
			}
		}
	}
}
</style>
